<template>
	<image src="https://cdn.meijingnet.cn/huishou/static/img/mine_top_bg.png"
		:style="{'height':(!memberInfo || memberInfo?.authStatus==1)?'474rpx':'600rpx','width':'750rpx'}"></image>
	<view class="top_box" :style="{'height':(!memberInfo || memberInfo?.authStatus==1)?'474rpx':'600rpx'}">
		<!-- #ifdef MP-WEIXIN -->
		<view class="info_box"
			:style="{'margin-top':`calc(${menuButtonInfo.top}px - (80rpx - ${menuButtonInfo.height}px)/2)`,'width':`calc(${menuButtonInfo.left}px - 36rpx - (100% - ${menuButtonInfo.right}px))`}">
			<image src="/static/icon/avatar.png" class="avatar" />
			<text class="nickname" v-if="memberInfo">{{memberInfo.phone}}</text>
			<navigator url="/pages/login/login" v-else
				style="display: flex;align-items: center;justify-content: start;flex: 1;">
				登录 / 注册
				<image src="/static/icon/to_right.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" />
			</navigator>
			<navigator class="msg_box" style="margin-right: 10rpx;" url="/pages/setting/setting">
				<image src="/static/icon/setting.png"></image>
			</navigator>
			<!-- <navigator class="msg_box">
				<image src="/static/icon/msg.png"></image>
				<view>8</view>
			</navigator> -->
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="info_box" style="margin: 30rpx 36rpx 0 36rpx;width: 678rpx;">
			<image src="/static/icon/avatar.png" class="avatar" />
			<text class="nickname" v-if="memberInfo">{{memberInfo.phone}}</text>
			<navigator url="/pages/login/login" v-else
				style="display: flex;align-items: center;justify-content: start;flex: 1;">
				登录 / 注册
				<image src="/static/icon/to_right.png" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;" />
			</navigator>
			<navigator class="msg_box" style="margin-right: 10rpx;" url="/pages/setting/setting">
				<image src="/static/icon/setting.png"></image>
			</navigator>
			<!-- <navigator class="msg_box">
				<image src="/static/icon/msg.png"></image>
				<view>8</view>
			</navigator> -->
		</view>
		<!-- #endif -->
		<view class="tishi" v-if="memberInfo && memberInfo.authStatus!=1">
			<image src="/static/icon/close_1.png" />
			<text style="flex: 1;">为了资金安全，请尽快进行实名认证</text>
			<navigator style="font-size: 28rpx;display: flex;align-items: center;justify-content: flex-end;"
				url="/pages/account_security_center/account_security_center">
				去认证
				<image src="/static/icon/to_right_2.png" style="margin-left: 10rpx;" />
			</navigator>
		</view>
		<view class="card_box">
			<image src="/static/mine/card.png" mode="widthFix" class="card" />
			<image src="/static/mine/card_bottom.png" v-if="memberInfo" mode="widthFix" class="card_bottom" />
			<view
				style="display: flex;align-items: center;justify-content: flex-start;width: 100%;height: 40rpx;position: absolute;top: 36rpx;left: 36rpx;">
				<text style="color: #432004;font-size: 24rpx;margin-right: 36rpx;font-weight: bold;">我的钱包</text>
				<template v-if="memberInfo?.authStatus==1">
					<image src="/static/mine/i1.png" style="height: 32rpx;width: 32rpx;margin-right: 10rpx;" /><text
						style="color: #733E0A;font-size: 22rpx;margin-right: 20rpx;">已实名认证</text>
					<image src="/static/mine/i2.png" style="height: 32rpx;width: 32rpx;margin-right: 10rpx;" /><text
						style="color: #733E0A;font-size: 22rpx;">安全保障中</text>
				</template>
			</view>
			<view class="card_mid_box">
				<view class="i">
					<text>{{memberInfo?.balance || 0}}</text>
					<text>余额 (元)</text>
				</view>
				<view class="i">
					<text>{{memberInfo?.pendingAmount || 0}}</text>
					<text>待入账 (元)</text>
				</view>
				<view v-if="memberInfo?.walletStatus==2" class="b" @click="yidongjie"
					style="background-color: #F1F5F9;color: #90A1B9;">已冻结</view>
				<navigator v-else class="b" url="/pages/withdraw/withdraw">去提现</navigator>
			</view>
		</view>
	</view>
	<view v-if="memberInfo"
		style="width: 100%;background-color: #ffffff;height: auto;border-radius: 0 0 30rpx 30rpx;padding: 20rpx 36rpx 36rpx 36rpx;box-sizing: border-box;">
		<view style="width: 100%;height: 60rpx;display: flex;align-items: center;justify-content: space-between;">
			<image src="/static/mine/zhangdan_title.png" style="height: 36rpx;" mode="heightFix"></image>
			<navigator url="/pages/wallet/wallet"
				style="font-size: 24rpx;display: flex;align-items: center;justify-content: center;background: linear-gradient( 97deg, #FEF9C2 0%, #FFDF20 50%, #FFDF20 100%);height: 60rpx;width: 230rpx;border-radius: 30rpx;">
				查看钱包明细
				<image src="/static/icon/to_right_2.png" style="height: 32rpx;width: 32rpx;" />
			</navigator>
		</view>
		<view v-if="memberInfo.lastBill"
			style="margin-top: 40rpx;height: 40rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;gap: 10rpx;">
			<image src="/static/mine/kuohao.png" mode="heightFix" style="height: 26rpx;width: auto;" />
			<text style="font-size: 28rpx;flex: 1;" class="ellipsis">{{memberInfo.lastBill.remark}}
				{{memberInfo.lastBill.productName}}</text>
			<text style="font-size: 36rpx;">{{memberInfo.lastBill.businessType==1?'+':'-'}} ¥
				{{memberInfo.lastBill.amount}}</text>
			<text style="font-size: 28rpx;color: #62748E;">{{memberInfo.lastBill.updateTime}}</text>
			<image src="/static/mine/kuohao.png" mode="heightFix"
				style="height: 26rpx;width: auto;transform: rotate(180deg);" />
		</view>
	</view>
	<view class="box">
		<image src="/static/mine/order_title.png" style="height: 36rpx;" mode="heightFix"></image>
		<view class="order_btn_box">
			<navigator class="i" url="/pages/order_page/order_page?current=0">
				<image src="/static/mine/order1.png" />
				<view><text>全部订单</text>
					<image src="/static/icon/to_right.png" />
				</view>
			</navigator>
			<view style="height: 60rpx;width: 1px;background-color: #E2E8F0;"></view>
			<navigator class="i" url="/pages/order_page/order_page?current=1">
				<image src="/static/mine/order2.png" />
				<view><text>验证中</text></view>
			</navigator>
			<navigator class="i" url="/pages/order_page/order_page?current=2">
				<image src="/static/mine/order3.png" />
				<view><text>交易成功</text></view>
			</navigator>
			<navigator class="i" url="/pages/order_page/order_page?current=3">
				<image src="/static/mine/order4.png" />
				<view><text>交易失败</text></view>
			</navigator>
		</view>
		<view v-if="chulizhongNum>0"
			style="height: 80rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;gap: 15rpx;padding: 0 20rpx;box-sizing: border-box;border-radius: 20rpx;background-color: #F8FAFC;margin-top: 36rpx;">
			<image src="/static/mine/state1.png" style="height: 40rpx;width: 40rpx;" />
			<text style="font-size: 26rpx;">验证中</text>
			<text style="color: #62748E;font-size: 22rpx;flex: 1;">您的卡券正在检测中，请耐心等待</text>
			<navigator url="/pages/order_page/order_page?current=1"
				style="height: 60rpx;width: 120rpx;font-size: 22rpx;background-color: #ffffff;border-radius: 10rpx;display: flex;align-items: center;justify-content: center;">
				查看详情</navigator>
		</view>
	</view>
	<!-- #ifdef MP-WEIXIN -->
	<view class="box">
		<view style="height: 90rpx;width: 100%;display: flex;align-items: center;justify-content: space-between;">
			<view
				style="display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;height: 100%;">
				<view style="color: #020618;font-size: 28rpx;height: 30rpx;line-height: 30rpx;">专业在线1V1帮您解决疑问</view>
				<view style="color: #62748E;font-size: 24rpx;height: 25rpx;line-height: 25rpx;">专业解答 · 流程指引 · 进度跟踪
				</view>
			</view>
			<view @click="customerService"
				style="display: flex;align-items: center;justify-content: center;gap: 10rpx;background-color: #F8FAFC;border-radius: 20rpx;width: 240rpx;height: 80rpx;font-size: 28rpx;">
				<image src="/static/logo/wx.png" style="height: 40rpx;width: 40rpx;" />添加微信
			</view>
		</view>
	</view>
	<!-- #endif -->
	<view class="box">
		<image src="/static/mine/function_title.png" style="height: 36rpx;" mode="heightFix"></image>
		<view class="order_btn_box">
			<navigator class="i" url="/pages/account_security_center/account_security_center">
				<image src="/static/mine/f1.png" />
				<view><text>账号安全</text>
				</view>
			</navigator>
			<navigator class="i" url="/pages/help_center/help_center">
				<image src="/static/mine/f2.png" />
				<view><text>帮助中心</text></view>
			</navigator>
			<!-- 			<navigator class="i">
				<image src="/static/mine/f3.png" />
				<view><text>反馈建议</text></view>
			</navigator> -->
			<navigator class="i" url="/pages/setting/setting">
				<image src="/static/mine/f4.png" />
				<view><text>设置</text></view>
			</navigator>
		</view>
	</view>
	<view class="box">
		<image src="/static/mine/title3.png" style="height: 36rpx;" mode="heightFix"></image>
		<view class="sub_title">" 您的信任，我们用体系守护 "</view>
		<view class="order_btn_box">
			<view class="i">
				<image src="/static/mine/b1.png" />
				<view><text>极速响应</text>
				</view>
			</view>
			<view class="i">
				<image src="/static/mine/b2.png" />
				<view><text>价格无忧</text></view>
			</view>
			<view class="i">
				<image src="/static/mine/b3.png" />
				<view><text>权益保障</text></view>
			</view>
			<view class="i">
				<image src="/static/mine/b4.png" />
				<view><text>隐私安全</text></view>
			</view>
		</view>
		<view class="jianbian" style="margin-top: 36rpx;">
			<image src="/static/mine/xingxing.png" /><text>支持</text><text>200+卡种品类回收</text>
		</view>
		<view class="jianbian">
			<image src="/static/mine/xingxing.png" /><text>对接</text><text>20+服务商实时价格数据</text>
		</view>
		<view class="jianbian">
			<image src="/static/mine/xingxing.png" /><text>服务</text><text>262,791用户完成成交</text>
		</view>
		<view style="height: 150rpx;width: 100%;" class="safe"></view>
	</view>
	<view class="safe"
		style="position: fixed;bottom: 0;left: 0;height: 110rpx;width: 750rpx;background-color: #ffffff;display: flex;align-items: center;justify-content: space-between;font-size: 20rpx;">
		<navigator url="/pages/index/index" open-type="redirect"
			style="height: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #62748E;">
			<image src="/static/tab/index_out.png" style="width: 60rpx;height: 60rpx;margin-bottom: 6rpx;" />首页
		</navigator>
		<navigator style="width: 280rpx;position: relative;height: 100%;" url="/pages/category/category">
			<image src="/static/tab/sell.png" mode="widthFix"
				style="width: 280rpx;height: auto;position: absolute;left: 0;top: -20rpx;"></image>
		</navigator>
		<view
			style="height: 100%;flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<image src="/static/tab/mine_in.png" style="width: 60rpx;height: 60rpx;margin-bottom: 6rpx;" />我的
		</view>
	</view>
	<view class="mask" v-if="showMingpian" @click="showMingpian=false">
	</view>
	<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="showMingpian=false">
			</image>
		</view>
		<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
		<view
			style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
			长按识别二维码，添加专属顾问</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png" show-menu-by-longpress mode="heightFix"
			style="height: 300rpx;" lazy-load />
	</view>
	<!-- #ifdef MP-ALIPAY -->
	<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
	<!-- #endif -->
</template>

<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				menuButtonInfo: {},
				memberInfo: null,
				chulizhongNum: 0,
				showMingpian: false,
			}
		},
		async onLoad() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// #ifdef MP-ALIPAY
			// my.hideBackHome();
			// #endif
		},
		async onShow() {
			let {
				result: memberInfo = null
			} = await api.member_info();
			if (memberInfo?.lastBill) {
				if (memberInfo.lastBill.updateTime.length > 6) {
					memberInfo.lastBill.updateTime = memberInfo.lastBill.updateTime.substring(5, 10);
				}
			}
			let chulizhongNum = 0;
			if (memberInfo?.phone) {
				let {
					result = []
				} = await api.order_list();
				for (let i of result) {
					if (i.status == 1) {
						chulizhongNum++;
					}
				}
				memberInfo.phone = memberInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
			this.memberInfo = memberInfo;
			this.chulizhongNum = chulizhongNum;
		},
		methods: {
			customerService() {
				getApp().customerService(this);
			},
			yidongjie() {
				uni.showToast({
					title: '提现审核失败\n请联系客服人员处理',
					icon: 'none',
					duration: 1500
				})
			},
		}
	}
</script>

<style>
	.top_box {
		height: 600rpx;
		width: 750rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.top_box .info_box {
		height: 80rpx;
		margin-left: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top_box .info_box .avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.top_box .info_box .nickname {
		font-size: 34rpx;
		flex: 1;
	}

	.top_box .info_box .msg_box {
		height: 100%;
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.top_box .info_box .msg_box image {
		height: 50rpx;
		width: 50rpx;
	}

	.top_box .info_box .msg_box view {
		background-color: #FB2C36;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		padding: 0 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.top_box .tishi {
		height: 80rpx;
		width: 678rpx;
		margin: 36rpx 36rpx 0 36rpx;
		border: 1px solid #FFDF20;
		box-sizing: border-box;
		background: linear-gradient(91deg, rgba(254, 249, 194, 0.3) 0%, rgba(254, 249, 194, 0.8) 100%);
		border-radius: 40rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10rpx;
		color: #733E0A;
		font-size: 26rpx;
	}

	.top_box .tishi image {
		height: 32rpx;
		width: 32rpx;
	}

	.top_box .card_box {
		width: 678rpx;
		height: 270rpx;
		margin: 36rpx 36rpx 0 36rpx;
		position: relative;
	}

	.top_box .card_box .card {
		width: 678rpx;
		height: 270rpx;
	}

	.top_box .card_box .card_bottom {
		width: 750rpx;
		height: 72rpx;
		position: absolute;
		bottom: -20rpx;
		left: -36rpx;
	}

	.top_box .card_box .card_mid_box {
		position: absolute;
		right: 36rpx;
		left: 36rpx;
		height: 95rpx;
		top: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top_box .card_box .card_mid_box .i {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.top_box .card_box .card_mid_box .i text:first-child {
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.top_box .card_box .card_mid_box .i text:last-child {
		font-size: 24rpx;
		line-height: 24rpx;
	}


	.top_box .card_box .card_mid_box .b {
		background: linear-gradient(115deg, #FEFCE8 0%, #FEF9C2 50%, #FEF9C2 100%), #FEFCE8;
		border-radius: 40rpx;
		height: 80rpx;
		width: 165rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.order_btn_box {
		width: 100%;
		height: 145rpx;
		margin-top: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_btn_box .i {
		height: 145rpx;
		width: 145rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.order_btn_box .i image {
		height: 100rpx;
		width: 100rpx;
	}

	.order_btn_box .i view {
		height: 40rpx;
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order_btn_box .i view text {
		flex: 1;
	}

	.order_btn_box .i view text:only-child {
		text-align: center;
	}

	.order_btn_box .i view image {
		height: 32rpx;
		width: 32rpx;
	}

	.sub_title {
		text-decoration: underline 6rpx #FFDF20;
		/* 防止下划线避开字母降部 */
		text-decoration-skip-ink: none;
		/* 微调下划线位置使其更贴近文字 */
		text-underline-offset: -6rpx;
		color: #020618;
		font-size: 24rpx;
		height: 30rpx;
		line-height: 30rpx;
		margin-top: 10rpx;
	}

	.jianbian {
		width: 100%;
		height: 65rpx;
		background: linear-gradient(90deg, rgba(255, 223, 32, 0.15) 0%, rgba(0, 201, 80, 0) 100%);
		border-radius: 30rpx;
		padding: 0 36rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 20rpx;
	}

	.jianbian image {
		height: 40rpx;
		width: 40rpx;
	}

	.jianbian text:first-child {
		font-size: 28rpx;
	}

	.jianbian text:last-child {
		color: #62748E;
		font-size: 24rpx;
	}
</style>